<style>
    .tab-content > .chart {
        padding: 10px;
    }
</style>

<div>
    <form action="" role="form" class="form-commonsearch">

        <div>
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-2">
                    <div class="form-group">
                        <label class="control-label">时间选择</label>
                        <div>
                            <input type="text" class="form-control datetimerange" data-locale='{"format":"YYYY-MM-DD HH:mm:ss", "separator":" - "}' placeholder="请选择时间区间" value="" />
                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-4 col-md-2">
                    <div class="form-group">
                        <label class="control-label">店铺选择</label>
                            <div class="col-xs-12">
                                <input id="shop_id" data-source="shop/shop/selectpage"
                                       class="form-control selectpage form-control" name="row[shop_id]" type="text"/>
                            </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-4 col-md-2">
                    <div class="form-group">
                        <label class="control-label">查询</label>
                        <div class="col-xs-12">
                            <input  id="c-switch" name="row[switch]" type="hidden" value="0">
                            <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch" data-yes="1" data-no="0" >
                                <i class="fa fa-toggle-on text-success fa-flip-horizontal text-gray fa-2x"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-4 col-md-2">
                    <div class="form-group">
                        <label class="control-label"></label>
                        <div class="row">
                            <div class="col-xs-6">
                                <input type="button" id="btn" class="btn btn-success btn-block" value="提交"/>
                            </div>
                            <div class="col-xs-6">
                                <input type="reset" id="reset" class="btn btn-primary btn-block" value="重置"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-lg-2 col-xs-6">
        <div class="small-box bg-aqua">
            <div class="inner">
                <h3 id="total_amount">0.00</h3>
                <p>本月订单流水</p>
            </div>
            <div class="icon">
                <i class="fa fa-shopping-cart"></i>
            </div>
            <div style="padding: 0 8px">
                <p>棋牌和台球订单的流水</p>
            </div>
        </div>

        <div class="small-box bg-aqua">
            <div class="inner">
                <h3 id="total_profit">0.00</h3>
                <p>本月商家总收益</p>
            </div>
            <div class="icon">
                <i class="fa fa-area-chart"></i>
            </div>
            <div style="padding: 0 8px">
                <p>商家小程序收益</p>
            </div>
        </div>
    </div>

    <div class="col-lg-2 col-xs-6">
        <div class="small-box bg-red">
            <div class="inner">
                <h3 id="orders">0</h3>
                <p>本月订单数</p>
            </div>
            <div class="icon">
                <i class="fa fa-user"></i>
            </div>
            <div style="padding: 0 8px">
                <p>棋牌和台球订单数</p>
            </div>
        </div>

        <div class="small-box bg-red">
            <div class="inner">
                <h3 id="per_customer">0.00</h3>
                <p>本月客单价</p>
            </div>
            <div class="icon">
                <i class="fa fa-area-chart"></i>
            </div>
            <div style="padding: 0 8px">
                <p>订单的平均价格</p>
            </div>
        </div>
    </div>

    <div class="col-lg-2 col-xs-6">
        <div class="small-box bg-green">
            <div class="inner">
                <h3 id="qp_amount">0.00</h3>
                <p>本月-棋牌-订单流水</p>
            </div>
            <div class="icon">
                <i class="fa fa-area-chart"></i>
            </div>
            <div style="padding: 0 8px">
                <p>棋牌的订单流水</p>
            </div>
        </div>

        <div class="small-box bg-green">
            <div class="inner">
                <h3 id="tq_amount">0.00</h3>
                <p>本月-台球-订单流水</p>
            </div>
            <div class="icon">
                <i class="fa fa-area-chart"></i>
            </div>
            <div style="padding: 0 8px">
                <p>台球订单的流水</p>
            </div>
        </div>
    </div>

    <div class="col-lg-2 col-xs-6">
        <div class="small-box bg-purple">
            <div class="inner">
                <h3 id="mt_amount">0.00</h3>
                <p>本月-美团-流水</p>
            </div>
            <div class="icon">
                <i class="fa fa-users"></i>
            </div>
            <div style="padding: 0 8px">
                <p>棋牌和台球美团流水</p>
            </div>
        </div>

        <div class="small-box bg-purple">
            <div class="inner">
                <h3 id="dou_amount">0.00</h3>
                <p>本月-抖音-流水</p>
            </div>
            <div class="icon">
                <i class="fa fa-users"></i>
            </div>
            <div style="padding: 0 8px">
                <p>棋牌和台球抖音流水</p>
            </div>
        </div>
    </div>

    <div class="col-lg-2 col-xs-6">
        <div class="small-box bg-yellow">
            <div class="inner">
                <h3 id="qp_ratio">0</h3>
                <p>本月-棋牌-复购用户占比</p>
            </div>
            <div class="icon">
                <i class="fa fa-users"></i>
            </div>
            <div style="padding: 0px 8px">
                <p>棋牌消费1次以上的用户占比</p>
            </div>
        </div>

        <div class="small-box bg-yellow">
            <div class="inner">
                <h3 id="tq_ratio">0</h3>
                <p>本月-台球-复购用户占比</p>
            </div>
            <div class="icon">
                <i class="fa fa-users"></i>
            </div>
            <div style="padding: 0 8px">
                <p>台球消费1次以上的用户占比</p>
            </div>
        </div>
    </div>


</div>

<div class="row" style="margin-bottom:5px;">

    <section class="col-lg-12 connectedSortable">
        <div class="nav-tabs-custom charts-custom">
            <!-- Tabs within a box -->
            <ul class="nav nav-tabs pull-right">
                <li class="active"><a href="#total-order-chart" data-toggle="tab">订单总流水</a></li>
                <li><a href="#shop-profit-chart" data-toggle="tab">商家小程序收益</a></li>
                <li><a href="#qp-order-chart" data-toggle="tab">棋牌流水</a></li>
                <li><a href="#tq-order-chart" data-toggle="tab">台球流水</a></li>
                <li><a href="#mt-order-chart" data-toggle="tab">美团流水</a></li>
                <li><a href="#dou-order-chart" data-toggle="tab">抖音流水</a></li>
                <li><a href="#balance-order-chart" data-toggle="tab">余额流水</a></li>
                <li><a href="#charge-order-chart" data-toggle="tab">充值流水</a></li>
                <li><a href="#tuan-order-chart" data-toggle="tab">团购券流水</a></li>
                <li class="pull-left header"><i class="fa fa-inbox"></i>月营收表</li>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <div class="chart tab-pane active" id="total-order-chart" style="position: relative; height: 300px;"></div>
                <div class="chart tab-pane" id="shop-profit-chart" style="position: relative; height: 300px;"></div>
                <div class="chart tab-pane" id="qp-order-chart" style="position: relative; height: 300px;"></div>
                <div class="chart tab-pane" id="tq-order-chart" style="position: relative; height: 300px;"></div>
                <div class="chart tab-pane" id="mt-order-chart" style="position: relative; height: 300px;"></div>
                <div class="chart tab-pane" id="dou-order-chart" style="position: relative; height: 300px;"></div>
                <div class="chart tab-pane" id="balance-order-chart" style="position: relative; height: 300px;"></div>
                <div class="chart tab-pane" id="charge-order-chart" style="position: relative; height: 300px;"></div>
                <div class="chart tab-pane" id="tuan-order-chart" style="position: relative; height: 300px;"></div>
            </div>
        </div>

    </section>
</div>

